元件內的內容並非固定，有時候我們會透過 Ajax 撈資料回來再渲染到頁面上，而通常我們撈回來的資料都會存放到 Vue 實體的 data 內，這時候元件想要讀取 Vue 實體的 data 資料時，就可以使用 props 來傳遞

基本 props 的使用:

在 my-component 內使用 app 的 data 內 msg 的字串內容

<div id="app">
    <!-- 3. 動態綁定自訂的名字並跟 Vue 實體的 msg 做綁定 -->
    <my-component :my-title="msg"></my-component>
</div>

<script type="text/x-template" id="my-component">
    <div class="card">
        <!-- 2. 把自訂的名字呈現在 x-template 內 -->
        <div class="card-title">{{ myTitle }}</div>
        ...
    </div>
</script>

<script>
 // 1. 先在 Vue.component() 內使用 props 並自訂一個名字
 Vue.component('my-component', {
     template: '#my-component',
     props: ['myTitle'],
 });
 
 const app = new Vue({
     el: '#app',
     data: {
         msg: 'Title',
     }
 });
</script>

步驟如下:

1. 先在 Vue.component() 內使用 props 並自訂一個名字
2. 把自訂的名字呈現在 x-template 內
3. 動態綁定自訂的名字並跟 Vue 實體的 msg 做綁定

上述是基本的 props 使用。

props 之檢查型態:

有時候我們會希望從外部傳遞進去元件的資料，是有指定的資料型態，這個時候就需要改變 props 的寫法，改成用物件，自定義傳遞資料的名字也需改成物件的方式

Vue.component('my-component', {
    template: '#my-component',
    props: {
        propA: Number,  // 指定數值型別
        propB: [String, Number],  // 指定多種條件可以寫成陣列
        propC: {  // 必要欄位，且限定為字串型別
            type: String,
            required: true,
        },
        propD: {  // 指定為數字型別，若外面沒有預設數字，則指定預設數字
            type: Number,
            dafault: 100,
        },
        propE: {  // 指定為物件型別，可以為陣列或者物件，並指定預設資料
            type: Object,
            default: function(){
                return {
                    msg: 'Hello'
                }
            }
        },
        propF: {  // 使用 validator 自訂驗證
            validator: function(value){  // value 為傳送進去的資料
                // 當大於 10 的時候才會通過驗證
                return value > 10
            }
        }
    }
});

props 之傳遞物件:

當我們要傳送到元件的資料為 Vue 實體的 data 物件格式的某個屬性時，會發生什麼事 ?

<my-component :count="counts"></my-component>

<script>
    Vue.component('my-component', {
        template: '{{ count.num }}<button @click="count.num++"></button>',
        props: ['count']
    });

    const app = new Vue({
        el: '#app',
        data: {
            counts: {
                num: 0,
            }
        }
    });
</script>

按照原生的 JS 語法，我們會下意識的直接用 . 來讀取物件的屬性，但這時候會是錯誤的，因為 JS 的物件傳參考特性，所以即使我們使用 props 仍然會去更改到 Vue 實體的資料，那解決的方法其實前一篇也有講到，用 function return 的方式，如下:

Vue.component('my-component', {
    template: '{{ newCount }}<button @click="newCount++"></button>',
    props: ['count'],
    data: function(){
        return {
            newCount: this.count.num
        }
    }
});

以上就是 Vue 實體要傳遞資料給元件的 props 介紹。